<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    class Page {
        constructor(arr){
            this.btn = []
            this.bottom = null
            this.data = [...arr]
            this.render()
            this.arr = [
                {path : '/zhibo' , fcn : this.fn1}
                ,{path : '/news' , fcn : this.fn1}
            ]
            // this.fn1()
            console.log(this.data);
            this.run()
        }
        render(){
            let box = document.createElement('div')
            let top = document.createElement('div')
            let bottom = document.createElement('div')
            box.classList.add('box')
            top.classList.add('top')
            bottom.classList.add('bottom')
            let btn1 = document.createElement('button')
            let btn2 = document.createElement('button')
            btn1.innerText = '直播'
            btn2.innerText = '新闻'
            top.appendChild(btn1)
            top.appendChild(btn2)
            box.appendChild(top)
            box.appendChild(bottom)
            this.bottom = bottom
            console.log(this.bottom);
            this.btn.push(btn1)
            this.btn.push(btn2)
            document.body.appendChild(box)
        }
        fn1(){
            this.render()
            this.bottom.innerHTML = ''
            for(let i = 0 ; i < 10 ; i++){
                let h2 = document.createElement('h2')
                h2.innerText = this.data[Math.round(Math.random() * this.data.length - 1)]
                console.log(this.bottom);
                this.bottom.appendChild(h2)
            }
        }
        run(){
            this.btn.forEach((item , index) => {
                item.onclick = () =>{
                    // e.preventDefault();
                    history.pushState({} , "" , this.arr[index].path)
                    this.arr[index].fcn()

                }
            })
        }
    }
    
    var arr = [12312,4,213,5234,6,3457,45,678,6577,76,42315,4,5236,387,76,98,766,234,,79,780,,76,42,3,6346,8678,120,989,865,234,21,15,34,8578,120,2345]
    var res = new Page(arr)
</script>